import { Layout } from 'antd';
import { Content } from 'antd/es/layout/layout';
import Sider from 'antd/es/layout/Sider';
import { Suspense, useMemo, useState } from 'react';

import { CustomMenu } from '@/components/eai-design';
import { CircleLoading } from '@/components/loading';

import SharelinkPage from '../share-link-manage';

import Api from './sub-pages/api';
import Feishu from './sub-pages/feishu';
import { useOrchestrationStore } from '@/store/orchestrationStore';
import { AppType } from '@/common';

const Share = () => {
  const [selectedKey, setSelectedKey] = useState('share-link');
  const { configurations, appDetail } = useOrchestrationStore();


  const isEnableBizmateDataset = useMemo(() => {
    return (
      configurations?.find((config) => config.name === 'enable_bizmate_dataset')?.default_value ===
        '1' || false
    );
  }, [configurations]);

  const items = [
    {
      label: '分享链接',
      key: 'share-link',
      icon: 'menu-share',
    },
    {
      label: 'API访问',
      key: 'api',
      icon: 'icon-park-solid--api',
    },
    ...(isEnableBizmateDataset || appDetail.appType == AppType.fusion ? [
    ] : [
      {
        label: '飞书机器人',
        key: 'feishu',
        icon: 'feishu',
      }
    ]),
  ];

  const handleMenuClick = (e: { key: string }) => {
    setSelectedKey(e.key);
  };

  const contentComponent = useMemo(() => {
    switch (selectedKey) {
      case 'share-link':
        return <SharelinkPage />;
      case 'api':
        return <Api />;
      case 'feishu':
        return <Feishu />;
      default:
        return null;
    }
  }, [selectedKey]);

  return (
    <Layout
      className="layoutborder bg-@brand-color-home [-ms-overflow-style:none] [scrollbar-width:none]"
      style={{ overflowX: 'hidden', height: '100vh' }}
    >
      <Layout>
        <>
          <Sider
            width={true ? 260 : '100%'}
            className="!rounded-[12px]"
            style={{
              background: '#ffffff',
              display: 'flex',
              flexDirection: 'column',
              height: 'calc(100vh - 80px)',
            }}
          >
            <CustomMenu
              style={{
                height: 'calc(100vh - 140px)',
                borderRadius: '12px',
                padding: '10px',
                background: '#ffffff',
                border: 'none',
                borderInlineEnd: 'unset',
              }}
              items={items}
              mode="inline"
              selectedKeys={selectedKey ? [selectedKey] : []}
              onClick={handleMenuClick}
            />
          </Sider>
          <Content
            className="mx-2 overflow-hidden rounded-xl bg-white"
            style={{
              height: 'calc(100vh - 80px)',
            }}
          >
            <Suspense fallback={<CircleLoading />}>{contentComponent}</Suspense>
          </Content>
        </>
      </Layout>
    </Layout>
  );
};

export default Share;
